<template>
  <div class="app-container">
    <el-autocomplete
      v-model="mapLocation.address"
      :fetch-suggestions="querySearch"
      placeholder="请输入详细地址"
      style="width: 100%"
      :trigger-on-focus="false"
      @select="handleSelect"
    />
    <div style="margin: 5px">
      <baidu-map
        class="bm-view"
        :center="mapCenter"
        :zoom="mapZoom"
        :scroll-wheel-zoom="true"
        ak="baidu-ak"
        @ready="handlerBMap"
        @click="getClickInfo"
      >
        <bm-marker
          v-if="point.lng"
          :position="{ lng: point.lng, lat: point.lat }"
          :dragging="true"
        >
          <bm-label
            :label-style="{ color: 'red', fontSize: '14px' }"
            :offset="{ width: 20, height: -15 }"
            content="当前位置"
          />
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import BaiduMap from "@/components/vue-baidu-map/components/map/Map.vue";
import { getLocation } from "@/api/map/map.js";
export default {
  name: "BaiduMapDemo",
  components: {
    BaiduMap,
  },
  props: {
    areaName: {
      type: String,
      default: "北京",
    },
  },
  data() {
    return {
      mapZoom: 15,
      point: {},
      mapCenter: { lng: 0, lat: 0 },
      mapLocation: {
        address: undefined,
        coordinate: undefined,
      },
    };
  },
  methods: {
    handlerBMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.mapCenter.lng = this.mapLocation.coordinate.lng;
        this.mapCenter.lat = this.mapLocation.coordinate.lat;
        this.mapZoom = 15;
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate));
      } else {
        this.mapCenter.lng = 113.271429;
        this.mapCenter.lat = 23.135336;
        this.mapZoom = 10;
      }
      this.querySearch(this.areaName, function () {});
    },
    querySearch(queryString, cb) {
      var that = this;
      var myGeo = new this.BMap.Geocoder();
      myGeo.getPoint(
        queryString,
        function (point) {
          if (point) {
            that.mapLocation.coordinate = point;
            that.makerCenter(point);
          } else {
            that.mapLocation.coordinate = null;
          }
        },
        this.locationCity
      );
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i);
              var item = { value: x.address + x.title, point: x.point };
              s.push(item);
              cb(s);
            }
          } else {
            cb();
          }
        },
      };
      var local = new this.BMap.LocalSearch(this.map, options);
      local.search(queryString);
    },
    handleSelect(item) {
      var { point } = item;
      this.mapLocation.coordinate = point;
      this.makerCenter(point);
      this.getClickInfo({ point: point });
    },
    makerCenter(point) {
      if (this.map) {
        // this.map.clearOverlays()
        // this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng;
        this.mapCenter.lat = point.lat;
        this.mapZoom = 15;
      }
    },
    async getClickInfo(e) {
      // console.log("---------------------------");
      // console.log(e.point);
      // console.log("---------------------------");
      this.point = e.point;
      let that = this;
      var myGeo = new this.BMap.Geocoder();
      const res = await getLocation(e.point.lng, e.point.lat);

      myGeo.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents;
        var address = "";
        if (res.code == 200) {
          address = res.data;
        } else {
          address =
            addComp.province +
            addComp.city +
            addComp.district +
            addComp.street +
            addComp.streetNumber;
        }
        // console.log(addComp);
        that.mapLocation.address = address;
        that.updateData();
      });
    },
    updateData() {
      let location = JSON.stringify({
        ...this.point,
        address: this.mapLocation.address,
      });
      this.emitting = true;
      this.$emit("input", location).$nextTick(() => {
        this.emitting = false;
      });
    },
  },
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>
